<template>
	<view class="conroom-form">
		<!-- 顶部导航 -->
		<view class="nav-bar">
			<view class="back-btn" @click="back"></view>
			<view class="nav-title">咨询室</view>
			<view class="right-space"></view>
		</view>
		
		<!-- 表单标题 -->
		<view class="form-title">
			使用咨询室申请表
		</view>
		
		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 1. 姓名 -->
			<view class="form-item">
				<view class="form-label required">1.姓名:</view>
				<input class="form-input" v-model="formData.name" placeholder="请输入内容" />
			</view>
			
			<!-- 2. 性别 -->
			<view class="form-item">
				<view class="form-label required">2.性别:</view>
				<input class="form-input" v-model="formData.gender" placeholder="请输入内容" />
			</view>
			
			<!-- 3. 身份证正面图片 -->
			<view class="form-item">
				<view class="form-label required">3.身份证正面图片:</view>
				<view class="upload-container">
					<view class="upload-item" v-if="formData.idCardFront">
						<image :src="formData.idCardFront" mode="aspectFill" style="width: 100%; height: 100%;"></image>
						<view class="upload-actions">
							<view class="action-item" @click="reuploadImage('idCardFront')">
								<image src="/static/function/course-one.png" mode="widthFix" style="filter: brightness(100);"></image>
								<text class="action-text">更换</text>
							</view>
						</view>
					</view>
					<view class="upload-btn" v-else @click="chooseImage('idCardFront')">
						<view class="upload-icon">+</view>
					</view>
				</view>
			</view>
			
			<!-- 4. 身份证反面图片 -->
			<view class="form-item">
				<view class="form-label required">4.身份证反面图片:</view>
				<view class="upload-container">
					<view class="upload-item" v-if="formData.idCardBack">
						<image :src="formData.idCardBack" mode="aspectFill" style="width: 100%; height: 100%;"></image>
						<view class="upload-actions">
							<view class="action-item" @click="reuploadImage('idCardBack')">
								<image src="/static/function/course-one.png" mode="widthFix" style="filter: brightness(100);"></image>
								<text class="action-text">更换</text>
							</view>
						</view>
					</view>
					<view class="upload-btn" v-else @click="chooseImage('idCardBack')">
						<view class="upload-icon">+</view>
					</view>
				</view>
			</view>
			
			<!-- 5. 咨询师证书 -->
			<view class="form-item">
				<view class="form-label required">5.咨询师证书:</view>
				<view class="upload-container">
					<view class="upload-item" v-if="formData.certificate">
						<image :src="formData.certificate" mode="aspectFill" style="width: 100%; height: 100%;"></image>
						<view class="upload-actions">
							<view class="action-item" @click="reuploadImage('certificate')">
								<image src="/static/function/course-one.png" mode="widthFix" style="filter: brightness(100);"></image>
								<text class="action-text">更换</text>
							</view>
						</view>
					</view>
					<view class="upload-btn" v-else @click="chooseImage('certificate')">
						<view class="upload-icon">+</view>
					</view>
				</view>
			</view>
			
			<!-- 6. 其他证明材料 -->
			<view class="form-item">
				<view class="form-label required">6.其他证明材料:</view>
				<view class="upload-container">
					<view class="upload-item" v-if="formData.otherMaterials">
						<image :src="formData.otherMaterials" mode="aspectFill" style="width: 100%; height: 100%;"></image>
						<view class="upload-actions">
							<view class="action-item" @click="reuploadImage('otherMaterials')">
								<image src="/static/function/course-one.png" mode="widthFix" style="filter: brightness(100);"></image>
								<text class="action-text">更换</text>
							</view>
						</view>
					</view>
					<view class="upload-btn" v-else @click="chooseImage('otherMaterials')">
						<view class="upload-icon">+</view>
					</view>
				</view>
			</view>
			
			<!-- 7. 选择预约咨询室机构 -->
			<view class="form-item">
				<view class="form-label required">7.选择预约咨询室机构:</view>
				<view class="select-container">
					<uni-data-select 
						v-model="formData.selectedAgency" 
						:localdata="agencyList" 
						popup-title="请选择预约的咨询机构" 
						placeholder="请选择预约的咨询机构"
						@change="onAgencyChange"
					/>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="submitForm">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					name: '',
					gender: '',
					idCardFront: '',
					idCardBack: '',
					certificate: '',
					otherMaterials: '',
					selectedAgency: ''
				},
				// 机构列表数据
				agencyList: [
					{ value: '1', text: '机构名称一' },
					{ value: '2', text: '机构名称二' },
					{ value: '3', text: '机构名称三' }
				]
			}
		},
		methods: {
			// 返回上一页
			back() {
				// 获取页面栈
				const pages = getCurrentPages()
				// 判断是否可以返回（页面栈长度大于1）
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					// 如果是第一个页面，则返回首页或其他默认页面
					uni.switchTab({ url: '/pages/home/home' })
				}
			},
			
			// 选择图片
			chooseImage(field) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						this.formData[field] = tempFilePath
					},
					fail: (err) => {
						console.error('选择图片失败:', err)
						// 处理access_token缺失错误
						if (err.errMsg && err.errMsg.includes('access_token missing')) {
							uni.showToast({
								title: '图片选择失败，请刷新页面后重试',
								icon: 'none',
								duration: 2000
							})
							// 在实际项目中，这里应该有获取access_token的逻辑
							// 或者提示用户重新登录
						} else {
							uni.showToast({
								title: '选择图片失败',
								icon: 'none'
							})
						}
					}
				})
			},
			
			// 重新上传图片
			reuploadImage(field) {
				this.chooseImage(field)
			},
			
			// 机构选择变化
			onAgencyChange(e) {
				if (e && e.detail && typeof e.detail.value !== 'undefined') {
					this.formData.selectedAgency = e.detail.value
				}
			},
			
			// 提交表单
			submitForm() {
				// 表单验证
				if (!this.formData.name) {
					uni.showToast({ title: '请输入姓名', icon: 'none' })
					return
				}
				if (!this.formData.gender) {
					uni.showToast({ title: '请输入性别', icon: 'none' })
					return
				}
				if (!this.formData.idCardFront) {
					uni.showToast({ title: '请上传身份证正面图片', icon: 'none' })
					return
				}
				if (!this.formData.idCardBack) {
					uni.showToast({ title: '请上传身份证反面图片', icon: 'none' })
					return
				}
				if (!this.formData.certificate) {
					uni.showToast({ title: '请上传咨询师证书', icon: 'none' })
					return
				}
				if (!this.formData.selectedAgency) {
					uni.showToast({ title: '请选择预约咨询室机构', icon: 'none' })
					return
				}
				
				// 模拟表单提交
				uni.showLoading({ title: '提交中...' })
				
				// 这里应该有实际的表单提交逻辑，调用API接口
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({ title: '提交成功', icon: 'success' })
					
					// 提交成功后可以跳转到其他页面
					setTimeout(() => {
						// 获取页面栈
						const pages = getCurrentPages()
						// 判断是否可以返回（页面栈长度大于1）
						if (pages.length > 1) {
							uni.navigateBack()
						} else {
							// 如果是第一个页面，则返回首页或其他默认页面
							uni.switchTab({ url: '/pages/home/home' })
						}
					}, 1500)
				}, 1500)
			}
		}
	}
</script>

<style scoped>
	/* 全局样式变量 */
	:root {
		--primary-color: #3B82F6;
		--secondary-color: #10B981;
		--background-color: #F9FAFB;
		--card-background: #FFFFFF;
		--text-primary: #1F2937;
		--text-secondary: #6B7280;
		--border-color: #E5E7EB;
		--success-color: #22C55E;
		--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	}
	
	/* 页面容器 */
	.conroom-form {
		background-color: var(--background-color);
		min-height: 100vh;
		padding-bottom: 80rpx;
	}
	
	/* 顶部导航 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		background-color: var(--primary-color);
		padding: 0 30rpx;
		box-shadow: var(--shadow-sm);
	}
	
	.back-btn {
		width: 40rpx;
		height: 40rpx;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='40rpx' height='40rpx'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: white;
	}
	
	.right-space {
		width: 40rpx;
	}
	
	/* 表单标题 */
	.form-title {
		padding: 40rpx 30rpx;
		font-size: 38rpx;
		font-weight: 700;
		text-align: center;
		background-color: var(--card-background);
		margin-bottom: 20rpx;
		color: var(--text-primary);
		box-shadow: var(--shadow-sm);
	}
	
	/* 表单内容 */
	.form-content {
		background-color: var(--card-background);
		padding: 0 40rpx 40rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: var(--shadow-md);
	}
	
	/* 表单项 */
	.form-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid var(--border-color);
	}
	
	/* 最后一个表单项无边框 */
	.form-item:last-child {
		border-bottom: none;
	}
	
	.form-label {
			font-size: 32rpx;
			margin-bottom: 20rpx;
			color: var(--text-primary);
			font-weight: 500;
		}

		/* 必填样式 */
		.form-label.required::after {
			content: '*';
			color: #EF4444;
			margin-left: 4rpx;
			font-weight: bold;
			font-size: 36rpx;
		}
	
	/* 输入框样式 */
	.form-input {
		width: 100%;
		height: 90rpx;
		border: 2rpx solid var(--border-color);
		border-radius: 12rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		color: var(--text-primary);
		background-color: white;
		transition: all 0.3s ease;
	}
	
	.form-input:focus {
		border-color: var(--primary-color);
		outline: none;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}
	
	/* 上传容器 */
	.upload-container {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	/* 上传项 */
	.upload-item {
		position: relative;
		width: 220rpx;
		height: 220rpx;
		border: 2rpx solid var(--border-color);
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		transition: transform 0.2s ease;
	}
	
	.upload-item:active {
		transform: scale(0.98);
	}
	
	.upload-item image {
		width: 100%;
		height: 100%;
	}
	
	/* 上传操作按钮 */
	.upload-actions {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(2px);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	.upload-item {
		overflow: hidden;
	}
	
	.upload-item:hover .upload-actions,
	.upload-item:active .upload-actions {
		opacity: 1;
	}
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 12rpx;
		backdrop-filter: blur(4px);
		margin: 10rpx;
		tint-color: white;
	}
	
	.action-text {
		font-size: 24rpx;
		color: white;
		margin-top: 6rpx;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}
	
	.action-item:active {
		background-color: rgba(255, 255, 255, 0.3);
	}
	
	.action-item image {
		width: 60%;
		height: 60%;
		tint-color: white;
	}
	
	/* 上传按钮 */
	.upload-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 220rpx;
		height: 220rpx;
		border: 2rpx dashed var(--primary-color);
		border-radius: 16rpx;
		background-color: rgba(59, 130, 246, 0.08);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}
	
	.upload-btn::before {
		content: '';
		position: absolute;
		top: -100%;
		left: -100%;
		width: 300%;
		height: 300%;
		background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.1), transparent);
		animation: shimmer 2s infinite;
	}
	
	@keyframes shimmer {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	
	.upload-btn:active {
		background-color: rgba(59, 130, 246, 0.15);
		transform: scale(0.98);
	}
	
	.upload-icon {
		font-size: 64rpx;
		color: var(--primary-color);
		font-weight: 300;
	}
	
	/* 选择器容器 */
	.select-container {
		widows: 100%;
	}
	
	/* 选择器样式重写 */
	.uni-select {
		border: 2rpx solid var(--border-color) !important;
		border-radius: 12rpx !important;
		height: 90rpx !important;
		background-color: white !important;
	}
	
	.uni-select-input {
		font-size: 32rpx !important;
	}
	
	/* 提交按钮 */
	.submit-btn {
		margin: 40rpx 30rpx;
		height: 100rpx;
		background: linear-gradient(135deg, var(--primary-color), #2563EB);
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--shadow-md);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}
	
	.submit-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		animation: shine 2s infinite;
	}
	
	@keyframes shine {
		100% {
			left: 100%;
		}
	}
	
	.submit-btn:active {
		transform: translateY(4rpx);
		box-shadow: var(--shadow-sm);
	}
</style>
